<template>
    <div class="step-input">
        <button :disabled="num<=min" @click="onClick(-1)">-</button>
        <p>{{num}}</p>
        <button  :disabled="num>=max" @click="onClick(1)">+</button>
    </div>
</template>
<script>
// export default 与export 的区别
// 1.export与export default均可用于导出常量、函数、文件、模块等
// 2.在一个文件或模块中，export、import可以有多个，export default仅有一个
// 3.通过export方式导出，在导入时要加{ }，export default则不需要
// 4. 
// (1) 输出单个值，使用export default
// (2) 输出多个值，使用export
// (3) export default与普通的export不要同时使用
    export default {
        props:{
            num:Number,
            max:{
                type:Number,
                default:Infinity
            },
            min:{
                type:Number,
                default:0
            }
        },
        methods:{
            onClick(v){
                this.$emit('change',v)
                console.log(v)
            }
        }
    }
</script>
<style lang="sass">
    .step-input 
        width: 150px
        display: inline-flex
        height: 50px
        line-height: 50px
        & > *
           width: 50px
        p
            text-align: center
</style>
